<template>
	<view class="wrap u-rela">
		<!-- <template v-if="Object.keys(goods).length">	 -->
		<template>
			<!-- 商品信息展示 -->
			<view class="goods-show ">
				<!-- 图片展示 -->
				<view class="u-text-center">
					<!-- <image  mode="heightFix" :src="imageurl"></image> -->
					<u-image mode="widthFix" :src="goodsInfo.indexUrl"></u-image>
				</view>
				<view class="u-p-20">
					<!-- 商品基本信息 -->
					<view class="base-info ">
						<text class="title u-font-40">{{goodsInfo.shopName}}</text>
						<view class="u-flex u-row-between u-m-t-20 u-m-b-20">
							<text class="price u-font-32">￥{{goodsInfo.price}}</text>
							<text class="small">库存:{{goodsInfo.stock}}</text>
							<text class="small">销量:{{goodsInfo.sales}}</text>
						</view>
					</view>
					<!-- tabs组件 -->
					<u-tabs :list="tabsList" :is-scroll="false" :current="tabsCurrent" @change="tabsChange"></u-tabs>
					<view class="u-p-b-80">
						<!-- 商品详情区 -->
						<template v-if="tabsCurrent==0">
							<view class="u-p-t-20">

								<view>{{goodsInfo.shopDetails}}</view>
								<!-- <image :src="goodsInfo.detailUrl"></image> -->
								<u-image mode="widthFix" :src="goodsInfo.detailUrl"></u-image>
							</view>
						</template>
						<!-- 商品评论区 -->
						<template v-if="tabsCurrent==1">
							<!-- <template v-if="goods.comments.length"> -->
							<template v-if="commentList.length">
								<!-- <view class="comment" v-for="(res, index) in commentList" :key="index"> -->
								<view class="comment" v-for="i in 3">
									<view class="left">
										<image :src="avatar_url" mode="aspectFill"></image>
									</view>
									<view class="right">
										<view class="top">
											<view class="name">昵称</view>
											<view class="like" :class="{ highlight: true }">
												<view class="num">111</view>
												<!-- <u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"></u-icon> -->
												<u-icon name="thumb-up" :size="30" color="#9a9a9a"></u-icon>
											</view>
										</view>
										<view class="content">balabala</view>
									<!-- 	<view class="reply-box">
											<view class="text">的萨达是范德萨发三份</view>
										</view> -->
									<!-- 	<view class="bottom">
											的撒飞洒发三份
										</view> -->
									</view>
								</view>
							</template>
							<template v-else>
							<!-- 评论为空 -->
							<u-empty text="暂无评论" src="order"></u-empty>
							</template>
						</template>
						<!-- 商品推荐区 -->
						<template v-if="tabsCurrent==2">
							<u-row gutter="16">
								<u-col span="6" v-for="(good,index) in likeGoods" :key="index">
									<goods-card :good="good"></goods-card>
								</u-col>
							</u-row>
						</template>
					</view>
				</view>
			</view>
			<!-- 提交订单栏 -->
			<view class="navigation">
				<view class="left">
					<view class="item" @tap="collect">
						<u-icon v-if="!isCollect" name="heart" :size="40" :color="$u.color['contentColor']">
						</u-icon>
						<u-icon v-else name="heart-fill" :size="40" color="#2979ff"></u-icon>
						<view class="text u-line-1">{{isCollect?"已收藏":"收藏"}}</view>
					</view>
					<view class="item" @tap="toCart">
						<u-badge :count="cartNum" bgColor="#2979ff" :is-center="true"></u-badge>
						<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">购物车</view>
					</view>
				</view>
				<view class="right">
					<u-button :disabled="goodsInfo.stock?false:true" class="cart btn" @click="addCart" :ripple="true"
						type="primary">加入购物车</u-button>
				</view>
			</view>
		</template>
		<!-- 	<template v-else>
			<view class="loading">
				<u-loading size="40" color="#2979ff"></u-loading>
				<view>
					<text class="small">拼命加载中~</text>
				</view>
			</view>
		</template> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				goodsInfo: {},
				goodsInfoList: [],
				avatar_url: 'https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg',
				// 商品基本信息
				// 推荐商品
				likeGoods: [],
				tabsList: [{
					name: '商品详情'
				}, {
					name: '商品评论',
					count: 0
				}, {
					name: '推荐商品'
				}],
				tabsCurrent: 0,
				commentList: [],
				collectNum: 0,
				cartNum: 0,
				username: '',
				isCollect: false

			}

		},
		watch: {
			goodsInfo(newValue) {
				this.isCollect = this.goodsInfo.is_like
			}
		},
		// computed: {
		// 	where() {
		// 		return `${new RegExp(this.goodsInfo.shopName, 'i')}.test(shopName)`
		// 	}
		// },
		onShow() {

		},
		created() {
			this.isCollect = this.goodsInfo.is_like
		},
		onLoad(option) {
			this.goodsId = option.id
			this.goodsDetail()
			this.getCartNum()
			try {
				const username = uni.getStorageSync('username');
				if (username) {
					this.username = username
				}
			} catch (e) {
				// error
			}
		},
		methods: {
			// 获取商品信息接口
			goodsDetail() {
				const username = uni.getStorageSync('username');
				uniCloud.callFunction({
					name: 'listGoods',
					data: {
						username: username
					}
				}).then(res => {
					for (let i in res.result.data) {
						// this.goodsList = res.result.data
						if (res.result.data[i].goodsId == this.goodsId) {
							this.goodsInfo = res.result.data[i]
						} else {
							this.likeGoods.push(res.result.data[i])
						}
					}
				})

			},
			// 切换tabs
			tabsChange(index) {
				this.tabsCurrent = index
			},
			// 收藏节流
			collect() {
				this.$u.throttle(this.collectNot, 1500)
			},
			//收藏更新
			updataCollect() {
				const username = uni.getStorageSync('username');
				uniCloud.callFunction({
					name: "updata-collect",
					data: {
						username: username,
						goods_id: this.goodsInfo._id
					}

				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: this.isCollect ? '收藏成功' : '取消收藏',
						icon: 'none',

					})
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 收藏和取消收藏
			async collectNot() {
				if (!this.username) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请先登录'
					});
					this.$u.route('/pages/user/login');

				} else {
					this.isCollect = !this.isCollect
					this.updataCollect()
					// 	// 收藏和取消收藏提示
					/* if (this.collectNum) {
						this.$u.toast("取消收藏成功")
						this.collectNum = 0
						const db = uniCloud.database();
						let collection = db.collection("goods-list")
						// console.log(collection);
						let res = await collection.where({
								_id: this.goodsInfo._id
							})
							.update({
								isCollect: 0,

							});
						this.goodsDetail()
					} else {
						this.$u.toast("收藏成功")
						this.collectNum = 1
						const db = uniCloud.database();
						let collection = db.collection("goods-list")
						// console.log(collection);
						let res = await collection.where({
								_id: this.goodsInfo._id
							})
							.update({
								isCollect: 1,

							});
						this.goodsDetail()

					} */

				}
			},

			//更新购物车
			updataCart() {
				const username = uni.getStorageSync('username');
				uniCloud.callFunction({
					name: 'updata-cart',
					data: {
						username: username,
						goods_id: this.goodsInfo._id
					}
				}).then(res => {})
			},
			//获取购物车数量
			getCartNum() {
				const username = uni.getStorageSync('username');
				uniCloud.callFunction({
					name: 'get-cartNum',
					data: {
						username: username
					}
				}).then(res => {
					this.cartNum = res.result
					console.log(this.cartNum);
				})
			},
			// 添加购物车(自带节流效果)
			async addCart() {
				this.updataCart()
				this.$u.toast("添加购物车成功！")
				//云更新方法2
				// if (!this.username) {
				// 	//未登录
				// 	uni.showToast({
				// 		icon: 'none',
				// 		position: 'bottom',
				// 		title: '请先登录'
				// 	});
				// 	this.$u.route('/pages/user/login');
				// } else {

				// 	const db = uniCloud.database();
				// 	const collection = db.collection('goods-list').where({
				// 		_id: this.goodsInfo._id
				// 	}).update({
				// 		inCart: 1
				// 	})
					// this.$u.toast("添加购物车成功！")
				// 	setTimeout(() => {
				// 		this.getCartNum()
				// 	}, 400)
				// }

			},
			/* 跳转到购物车页面 */
			toCart() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/cart/cart'
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		height: 90vh;

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.goods-show {
			.base-info {

				.title,
				.price {
					font-weight: bolder;
				}

				.price {
					color: rgb(209, 45, 58);
				}
			}

			.comment {
				display: flex;
				padding: 30rpx;

				.left {
					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						background-color: #f2f2f2;
					}
				}

				.right {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.name {
							color: #5677fc;
						}

						.like {
							display: flex;
							align-items: center;
							color: #9a9a9a;
							font-size: 26rpx;

							.num {
								margin-right: 4rpx;
								color: #9a9a9a;
							}
						}

						.highlight {
							color: #5677fc;

							.num {
								color: #5677fc;
							}
						}
					}

					.content {
						margin-bottom: 10rpx;
					}

					.reply-box {
						background-color: rgb(242, 242, 242);
						border-radius: 12rpx;
						text-indent: 1em;

						.item {
							padding: 20rpx;
							border-bottom: solid 2rpx $u-border-color;

							.username {
								font-size: 24rpx;
								color: #999999;
							}
						}

						.all-reply {
							padding: 20rpx;
							display: flex;
							color: #5677fc;
							align-items: center;

							.more {
								margin-left: 6rpx;
							}
						}
					}

					.bottom {
						margin-top: 20rpx;
						display: flex;
						font-size: 24rpx;
						color: #9a9a9a;

						.reply {
							color: #5677fc;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		// min-height: 100vh;
		.navigation {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			border: solid 2rpx #f2f2f2;
			background-color: #ffffff;
			padding: 16rpx 0;
			justify-content: space-between;

			.left {
				flex: 3;
				display: flex;
				font-size: 20rpx;
				justify-content: space-around;

				.item {
					position: relative;
					text-align: center;
				}
			}

			.right {
				flex: 9;
				display: flex;
				font-size: 28rpx;
				justify-content: flex-end;
				align-items: center;

				.btn {
					text-align: center;
					line-height: 66rpx;
					width: 90%;
					border-radius: 10rpx;
					color: #ffffff;
				}

				.cart {
					background-color: #2979ff;
					margin-right: 30rpx;
				}

				.buy {
					background-color: #ff7900;
				}
			}
		}
	}
</style>
